<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件阻止冒泡</title>
    <style>
        #big{
            width: 500px;
            height: 500px;
            background-color: rgb(233, 10, 47);
        }
        #medium{
            width: 400px;
            height: 400px;
            background-color: rgb(11, 83, 238);
        }
        #small{
            width: 300px;
            height: 300px;
            background-color: rgb(59, 240, 14);
            text-align: center;
        }
        div{ 
            margin:0 auto;
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="medium">
            <div id="small">
                世界之大！！！
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function ShowMsg(){
            alert("这是一个操作"); 
        }

        var a = document.getElementById("small");
        a.addEventListener("click", ShowMsg, true);

        var b = document.getElementById("medium");
        b.addEventListener("click", ShowMsg, true);

        var c = document.getElementById("big");
        c.addEventListener("click", ShowMsg, true);

    </script>
</body>
</html>